<template>
    <div class="container">
        <div class="content">
            <el-upload
                class="upload"
                ref="upload"
                :auto-upload="true"
                drag
                action="http://localhost:8088/bookmall/book/upload"
                :headers="headers"
                name="file"
                :limit="1"
                :on-progress="progressHandler"
                :on-success="successHandler"
                :on-remove="removeHandler"
                :on-change="changeHandler"
                :on-error="errorHandler"
                accept=".jpg,.jpeg"
                list-type="image"
            >
                <el-icon size="4rem"><Plus /></el-icon>
                <div class="el-upload__text">拖拽文件至此 或者 <em>点击上传</em></div>
                <template #tip>
                    <div class="el-upload__tip">文件格式应为JPEG，且大小不得超过1Mb</div>
                </template>
            </el-upload>
            <div class="image">
                <el-image :src="coverImg">
                    <template #error> 请上传图片 </template>
                </el-image>
            </div>
        </div>
        <div class="footer">
            <el-button @click="prevStep">上一步</el-button>
            <el-button type="primary" @click="nextStep" :disabled="isDisabled">下一步</el-button>
        </div>
    </div>
</template>

<script>
import { userStore } from "@/store/user";
import { Plus } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";

export default {
    props: ["cover"],
    components: {
        Plus,
    },
    data() {
        return {
            coverImg: "",
            dialogVisible: false,
            isDisabled: true,
            headers: {
                token: sessionStorage.getItem("token"),
            },
        };
    },
    beforeMount() {
        if (this.cover) {
            this.coverImg = this.cover;
            this.isDisabled = false;
            ElMessage({
                type: "warning",
                message: "你已经上传过了",
            });
        }
    },
    methods: {
        removeHandler() {
            this.isDisabled = true;
        },
        progressHandler(file) {
            // console.log(file);
            if (file.total > 1024 * 1024 * 1) {
                this.$refs["upload"].abort();
                ElMessage({
                    type: "error",
                    message: "上传文件大小不得超过1Mb",
                });
            }
        },
        nextStep() {
            this.$emit("step", 2);
        },
        prevStep() {
            this.$emit("step", 0);
        },
        changeHandler() {
            this.isDisabled = true;
        },
        successHandler(res) {
            this.coverImg = res.data;
            this.$emit("form", { coverImg: this.coverImg });
            setTimeout(() => {
                this.isDisabled = false;
            }, 200);
            console.log(res);
        },
        errorHandler() {
            this.isDisabled = true;
            ElMessage({
                type: "error",
                message: "文件上传出错",
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: column;
    width: 90%;

    .content {
        flex: 2;
        display: flex;
        flex-direction: row;

        .upload {
            flex: 2;
        }

        .image {
            flex: 1;
            padding: 0 2rem;

            .el-image {
                width: 135px;
                height: 195px;
            }
        }
    }

    .footer {
        flex: 1;
        margin-top: 2rem;
    }
}
</style>
